<!-- 个人信息 -->
<template>
<div class='personal-info'>
    <van-nav-bar
      title="个人信息"
      left-arrow
      right-text="保存"
      @click-left="goBack"
      @click-right="save"
    />
    <div class="avatar-info border-bottom">
        <p>{{userInfo.username}}</p>
        <van-image
          round
          width="1.2rem"
          height="1.2rem"
          fit="contain"
          :src="userInfo.avatar_default"
        />
    </div>
    <ul class="mine-list border-top">
      <li class="border-bottom" @click="toNickName">
        <label>昵称</label>
        <span>{{userInfo.username}}</span>
        <van-icon name="arrow" />
      </li>
      <li class="border-bottom" @click="sexShow = true">
        <label>性别</label>
        <span>{{userInfo.sex}}</span>
        <van-icon name="arrow" />
      </li>
      <li class="border-bottom" @click="showPopup()">
        <label>生日</label>
        <span>{{userInfo.birthday}}</span>
        <van-icon name="arrow" />
      </li>
      <li class="border-bottom" @click="constellationShow = true">
        <label>星座</label>
        <span>{{userInfo.constellation}}</span>
        <van-icon name="arrow" />
      </li>
    </ul>
    <ul class="mine-list pr0 border-top">
        <li class="border-bottom">
            <label>手机号</label>
            <input type="number" v-model="userInfo.telphone" disabled />
        </li>
        <li class="border-bottom">
            <label>用户号</label>
            <input type="number" v-model="userInfo.user_id" disabled />
        </li>
    </ul>
    <van-popup v-model="showDate" position="bottom" :style="{height:'40%'}">
        <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        @cancel="showDate = false"
        @confirm="onConfirm()"
        />
    </van-popup>
    <van-action-sheet
        v-model="sexShow"
        :actions="sexs"
        cancel-text="取消"
        @select="sexSelect"
        @cancel="sexShow = false"
    />
    <van-popup v-model="constellationShow" position="bottom">
        <van-picker
            show-toolbar
            v-model="constellationShow"
            :columns="constellations"
            @confirm="constellationSelect"
            @cancel="constellationShow = false"
        />
    </van-popup>
    
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
    name: 'PersonalInfo',
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    userInfo:{
        username:'',
        avatar_default: require('../assets/img/avatar_male_man.png'),
        sex:'',
        birthday:'',
        constellation:'',
        telphone:'',
        user_id:''
    },
    sexs: [
        {name:'男'},
        {name:'女'}
    ],
    showDate: false,
    minDate: new Date(1970,1,1),
    currentDate: new Date(),
    constellations:[
        '白羊座',
        '金牛座',
        '双子座',
        '巨蟹座',
        '狮子座',
        '处女座',
        '天秤座',
        '天蝎座',
        '射手座',
        '摩羯座',
        '水瓶座',
        '双鱼座'
    ],
    sexShow: false,
    constellationShow: false
};
},
//监听属性 类似于data概念
computed: {
    phone(){
        return this.$store.state.userPhone;
    },
    // token(){
    //     return this.$store.state.token;
    // }
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    //获取个人信息
    getUserInfo(){
        this.$axios.get('/user/getuserinfo',{
            params:{
                phone:this.phone
            },
            //headers:{token:this.token}
        }).then((res)=>{
            console.log(res);
            let {message,data,status} = res;
            if(status == 200){
                this.userInfo.username = data.user_name;
                switch(data.sex){
                    case 0: 
                        this.userInfo.sex = '女';
                        break;
                    case 1: 
                        this.userInfo.sex = '男';
                        break;
                    default:
                        this.userInfo.sex = '不明性别';
                };
                this.userInfo.birthday = data.birthday;
                this.userInfo.constellation = data.constellations;
                this.userInfo.telphone = data.phone;
                this.userInfo.user_id = data.id;
            }else{
                this.$toast(message)
            }
        })
    },
    //修改个人信息
    goBack(){
        //this.$router.back()
        window.history.length > 1 ? this.$router.push('/mine1') : this.$router.push('/');
    },
    onConfirm(){
        this.userInfo.birthday = this.timeFormat(this.currentDate);
        this.showDate = false;
    },
    showPopup(){
        this.showDate = true
    },
    timeFormat(value){
        let year = value.getFullYear(),
            month = value.getMonth() + 1,
            day = value.getDate();
        return year + '-' + (month<10 ? '0'+month : month) + '-' + (day<10 ? '0'+day : day);
    },
    sexSelect(item){
        //console.log(item)
        this.sexShow = false
        this.userInfo.sex = item.name;
    },
    constellationSelect(value){
        this.constellationShow = false
        this.userInfo.constellation = value;
    },
    toNickName(){
        this.$router.push(
            {
                name:'nickname',
                params:{
                    username:this.userInfo.username
                }
            }
        )
    },
    save(){
        this.$axios.get('/user/updateuserinfo',{
            //headers:{token:this.token},
            params:{
                user_id: this.userInfo.user_id,
                user_name: this.userInfo.username,
                sex: this.userInfo.sex == '女' ? 0 : 1,
                birthday: this.userInfo.birthday,
                constellations: this.userInfo.constellation,
                phone: this.userInfo.telphone
            }
        }).then((res)=>{
            console.log(res);
            let {message,data,status} = res;
            if(data.code == 200){
                this.$toast(data.message);
            }
            
        })
        
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    
    this.getUserInfo();
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {
    let isNickname = this.$route.params.nickname;
    if(isNickname){
        this.userInfo.username = isNickname;
    }
}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url(../assets/css/border-1px.css);
  .personal-info{
    .avatar-info{
        padding:0.36rem 0.3rem;
        overflow: hidden;
        border-color: #bbb;
        p{
            float:left;
            line-height:1.2rem;
            font-size:0.4rem;
        }
        .van-image{
            float:right;
            border:1px solid #bbb;
        }
    }
    .mine-list{
        margin-top:0.2rem;
        border-color: #bbb;
        li{
            border-color: #bbb;
            min-height:0.88rem;
            position:relative;
            padding:0 0.48rem 0 1.4rem;
            label{
                position: absolute;
                left:0.2rem;
                line-height:0.88rem;
                font-size:0.32rem;
                color:#101010;
            }
            span{
                display:block;
                text-align:right;
                line-height:0.88rem;
                font-size:0.32rem;
                color:#101010;
                height:0.88rem;
                width:100%;
            }
            .van-icon{
                font-size:0.32rem;
                position: absolute;
                right:0.1rem;
                top:50%;
                margin-top:-0.16rem;
            }
            
        }
        &.pr0{
            li{
                padding-right:0;
                input{
                    display:block;
                    width:100%;
                    box-sizing:border-box;
                    border:0 none;
                    background:#fff;
                    line-height:0.48rem;
                    padding:0.2rem;
                    text-align:right;
                    font-size:0.32rem;
                    color:#101010;
                }
            }
        }
    }
  }
</style>